/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import {ReportViewProps,} from "../../common/base";
import {末尾链接, 落款单位地址,} from "../../common/rarelyVary";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {useItemsMapPressure} from "../../common/pressure";
import {Projects记录 } from "./Regular.O-1";
import {检验结论报告} from "./Conclusion";
import {目录页VS} from "../../movable/rarelyVary";
import {注意事项Perform, 首页设备概况Perform} from "./rarelyVary";
import {ReportFirstPageHeadAllNmbbm, } from "../../industrial/rarelyVary";
import queryString from "query-string";
import {试验结论Perform} from "./viewRes";


export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,  source: orc,  verId,rep,
}) => {
    const qs= queryString.parse(window.location.search);
    const formatOriginal =qs && !!qs.original;
    //若有原始记录的：
    const Component=formatOriginal? OfficialReport : OfficialReport;
    return (<>
        <Component  source={orc} verId={verId} repId={repId} rep={rep}/>
    </>);
}

export const OfficialReport: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
  const theme= useTheme();
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
    const [rootMenu]=useRepMenuDirItems(Projects记录, orc.Projects, `/reportView/${rep?.modeltype}/ver/${verId}/${repId}`);
  return (
    <React.Fragment>
        {rootMenu}
        <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
            <div css={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
                "@media print": {height: '100vh', pageBreakInside: 'avoid',}
            }}>
                {ReportFirstPageHeadAllNmbbm({theme, rep})}
                <div>
                    <Text variant="h3" css={{
                        textAlign: 'center',
                        "@media (min-width:690px),print and (min-width:538px)": {fontSize: theme.fontSizes[6],}
                    }}>电站锅炉性能试验报告<br/>
                    </Text>
                    <br css={{"@media not print": {display: 'none'}}}/>
                    <Text variant="h6" css={{textAlign: 'center',}}>（ FJB/JK1126-2022 ）</Text>
                </div>
                <div>{首页设备概况Perform({theme, orc, rep})}</div>
                <div css={{textAlign: 'center', "@media print": {pageBreakInside: 'avoid'}}}>
                    {落款单位地址}
                </div>
            </div>
            {注意事项Perform({rep,})}
            {目录页VS({theme, orc, rep})}

            {检验结论报告({theme, orc, rep})}
            {试验结论Perform({theme, orc, rep,})}
        </div>
        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}
